<template>
  <!-- <el-form :inline="true" :model="adddata" class="demo-form-inline">
     <el-form-item label="部门名称">
       <el-input
       v-model="adddata.departmentName"
         placeholder="请输入部门名称"
         clearable
       />
     </el-form-item>
     <el-form-item label="部门类型" prop="departmentType" >
       <el-select v-model="adddata.departmentType" style="width: 200px;" placeholder="请选择部门类型">
         <el-option label="行政管理" value="行政管理" />
         <el-option label="财务管理" value="财务管理" />
       </el-select>
     </el-form-item>
     <el-form-item label="部门状态" prop="departmentState">
       <el-select v-model="adddata.departmentState" style="width: 150px;" placeholder="请选择状态">
         <el-option label="使用" value="使用" />
         <el-option label="禁用" value="禁用" />
       </el-select>
     </el-form-item>
     <el-form-item>
       <el-button type="danger" @click="gettableData()">搜索</el-button>
       <el-button type="primary" @click="gettableDatas()">新增</el-button>

     </el-form-item>
   </el-form> -->


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="heightId" label="序号" />
    <el-table-column prop="heightHeight" label="身高(cm)" />

    <el-table-column prop="heightWhight" label="体长(cm)" />
    <el-table-column prop="heightWaist" label=" 腰围(cm)" />
    <el-table-column prop="heightXiong" label="胸围(cm)" />
    <el-table-column prop="heightScrotum" label="阴囊围(cm)" />
    <el-table-column prop="heightBack" label="背膘厚度(cm)" />

    <el-table-column prop="heightEye" label="眼肌面积(cm)" />
    <el-table-column prop="heightWide" label="眼肌宽度(cm)" />
    <el-table-column prop="heightTime" label="日期">
      <template #default="scope">
        {{ scope.row.heightTime.substr(0, 16).replace('T', ' ') }}
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div>
    <el-pagination v-model:current-page="adddata.pageIndex" v-model:page-size="adddata.pageSize"
      :page-sizes="[3, 5, 8, 10]" :background="true" layout="total, sizes, prev, pager, next, jumper"
      :total="adddata.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const route = useRoute()
const router = useRouter()
const adddata = reactive({

  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
})

const tableData = ref([])
const gettableData = () => {
  axios.post(apiUrl+'/api/Height/ShowHeights', {

    pageIndex: adddata.pageIndex,
    pageSize: adddata.pageSize
  }).then(res => {
    tableData.value = res.data.data.list
    adddata.pageCount = res.data.data.pageCount;
    adddata.totalCount = res.data.data.totalCount;
  })
}
//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  adddata.pageSize = val
  gettableData()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  adddata.pageIndex = val
  gettableData()
}
const gettableDatas = () => {
  router.push({
    path: '/AddDepartment'
  })
}
onMounted(() => {
  gettableData()
})


</script>
